<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Loren Tetris</title>
    <link href="static/css/game.css" rel="stylesheet" type="text/css" />
    <script src="static/js/game-time.js" type="text/javascript"></script>
    <script src="static/js/game-constant.js" type="text/javascript"></script>
    <script src="static/js/game-block.js" type="text/javascript"></script>
    <script src="static/js/game-control.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="game-status">
            <div>
                游戏分数： <span id="score">0</span><br>
                游戏时间： <span id="game-time">00:00:00</span>
            </div>
        </div>
        <div id="game-next">

        </div>
        <div id="game">

        </div>
        <div id="game-over" class="game-panel">
            <div class="title">本局获得分数</div>
            <div id="over-score"></div>
            <div class="evaluate">游戏水平：<span id="evaluate"></span></div>
            <div class="replay"><a href="javascript:;" onclick="replayGame()">重新开始</a></div>
        </div>

        <div id="game-operation" class="control-panel">
            <div class="title">操作说明</div>
            <div class="operation">
                ↑：旋转方块<br>
                →：方块右移<br>
                ←：方块左移<br>
                ↓：方块下移<br>
                ctrl：快速下落<br>
                ent：游戏暂停
            </div>
            <div class="play"><a href="javascript:;" onclick="startGame()">开始游戏</a></div>
        </div>

        <div id="game-pause">
            <div id="pause">暂停</div>
        </div>

        <!--<div id="opponent">

        </div>-->
    </div>
</body>
<script>
    function startGame() {
        document.getElementById("game-operation").style.display = "none";
        new GameControl().initGame();
    }
    function replayGame() {
        document.getElementById("game-over").style.display = "none";
        new GameControl().initGame();
    }
</script>
</html>